<style scope lang="less">
.examine-grade {
  width: calc(100% - 20px);
  height: calc(100% - 60px);
  overflow: hidden;
  min-width: 1024px;
  background-color: white;
  min-height: 660px;
  h5 {
    margin: 20px 0;
    font-size: 18px;
  }
  p {
    margin: 10px 0;
  }
  .examine-grade-header {
    border: 1px solid #cccccc;
    padding: 10px;
    span {
      width: 20%;
      height: 24px;
      line-height: 24px;
      display: inline-block;
      border: 1px solid #999999;
      padding-left: 4px;
      margin-right: 20px;
      border-radius: 2px;
    }
    i {
      margin-left: 19%;
      font-style: normal;
    }
  }
  .tab-box {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #cccccc;
  }
  .exam-table {
    margin: 0 auto;
    width: 80%;
    .card {
      width: 200px;

      .image {
        width: 100%;
        height: 150px;
      }

      .comment {
        text-align: center;
        padding: 10px;
      }
    }
  }
  .toolbar {
    display: flex;

    padding-top: 20px;
    padding-bottom: 10px;

    .class-btn {
      padding: 3px 20px 3px 20px;
      background-image: url(../../../assets/images/class-btn-unselect.png);
      background-repeat: no-repeat;
      background-size: 15px 80%;
      background-position: center right;
      margin-right: 10px;
      cursor: pointer;
    }

    .class-btn-active {
      background-image: url(../../../assets/images/class-btn-select.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: #fff;
    }

    .more {
      padding: 3px 20px 3px 15px;
      margin-left: auto;
      cursor: pointer;
      color: #b3b3b3;
    }
  }
}
</style>

<template>
	<div class="examine-grade">
		<div class="exam-table">
			<div class="toolbar">
				<div
					:class="{'class-btn-active': currentKnowledgeClass === item.name || (index === 0 && !currentKnowledgeClass), 'class-btn': true}"
					:key="item.name"
					@click="selectKnowledgeClass(item.name)"
					v-for="(item, index) in knowledgeType"
				>{{item.name}}</div>
			</div>
			<h5>数据统计</h5>
			<div class="examine-grade-header">
				<p>
					总输入：
					<span>{{examGrade?examGrade.inputNum:'0'}}</span>错误:
					<span>{{examGrade?examGrade.inputErrorNum:'0'}}</span>错误率:
					<span>{{examGrade?examGrade.errorRate:'0'}}</span>‰
				</p>
				<p>
					总速度：
					<span>{{examGrade?examGrade.sumSpeed:'0'}}</span>键/小时
					<i>有效速度</i>
					<span>{{examGrade?examGrade.effectiveSpeed:'0'}}</span>
					键/小时
				</p>
			</div>
			<h5>数据结果</h5>
			<div class="tab-box">
				<el-table :data="examGrade.result" height="355" style="width: 100%">
					<el-table-column label="序号" prop="id" width="180"></el-table-column>
					<el-table-column label="题目数字" prop="question" width="180"></el-table-column>
					<el-table-column label="填写数字" prop="consequence"></el-table-column>
					<el-table-column label="结果" prop="state"></el-table-column>
				</el-table>
				<!-- <table-ex :columns="columns" :isFooter="false" :rows="examGrade.result" :total="100" selection="none"/> -->
			</div>
		</div>
	</div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from "vuex";
import { Message } from "element-ui";
import { examColumns, examStoreList } from "./../config";
import examResult from "@/pages/course/components/examResult";
import tableEx from "@/components/table/tableEx";

export default {
  name: "examineGrade",
  components: {
    "table-ex": tableEx,
    "exam-result": examResult
  },

  data() {
    return {
      columns: examColumns,
      examGrade: "",
      knowledgeType: [{ name: "数字录入" }, { name: "传票翻打" }],
      currentKnowledgeClass: ""
    };
  },

  mounted() {
    this.$route.query.type == "citation"
      ? (this.currentKnowledgeClass = "传票翻打")
      : (this.currentKnowledgeClass = "数字录入");
    this.loadInitData();
  },

  computed: {},

  methods: {
    loadInitData() {
      if (this.currentKnowledgeClass == "数字录入") {
        this.examGrade = "";
        let examGrade = this.$store.state.login.data.loginUser.username;
        let getdata = examGrade + "_number";
        localStorage.getItem(getdata) &&
          (this.examGrade = JSON.parse(localStorage.getItem(getdata)));
      } else {
        this.examGrade = "";
        let examGrade = this.$store.state.login.data.loginUser.username;
        let getdata = examGrade + "_citation";
        localStorage.getItem(getdata) &&
          (this.examGrade = JSON.parse(localStorage.getItem(getdata)));
      }
    },
    selectKnowledgeClass(name) {
      this.currentKnowledgeClass = name;
      this.loadInitData();
    }
  }
};
</script>
